import cn from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import EChart from '@kuiper-components/echarts';

import ChartTitle from '../../../../../components/ChartTitle';
import Empty from '../../../../../components/empty/EmptyPie';
import s from './style.module.css';

const pieOption = {
	color: ['#4CAB73', '#F8BE45'],
	legend: {
		orient: 'horizontal',
		bottom: 10,
		icon: 'circle',
	},
	series: [
		{
			center: ['50%', '50%'],
			name: '异常状态占比',
			type: 'pie',
			radius: ['45%', '60%'],
			avoidLabelOverlap: false,
			label: {
				normal: { show: false, position: 'center' },
				emphasis: {
					show: true,
					fontSize: 14,
					formatter: '{b}\n{d}%',
				},
			},
			emphasis: {
				label: {
					show: true,
					fontSize: '30',
					fontWeight: 'bold',
				},
			},
			labelLine: {
				show: false,
			},
			itemStyle: {
				borderColor: '#fff',
				borderWidth: 2,
			},
		},
	],
};

function AbnormalState({ className, resultNumbers, dateStr }) {
	const preData = resultNumbers.reduce(
		(res, item) => {
			res['正常'] += item.normalNodeCount;
			res['异常'] += item.totalNodeCount - item.normalNodeCount;
			return res;
		},
		{ 正常: 0, 异常: 0 }
	);

	const total = preData.正常 + preData.异常;
	const pieData = Object.entries(preData).map(([name, value]) => {
		return { name, value };
	});

	pieOption.series[0].data = pieData;

	return (
		<div className={cn(className, s.abnormalState)}>
			<ChartTitle className={s.title}>异常状态占比</ChartTitle>
			{total > 0 ? (
				<EChart className={s.chart} option={pieOption} key={dateStr} />
			) : (
				<div className={s.emptyContainer}>
					<Empty className={s.empty} width={24} />
				</div>
			)}
		</div>
	);
}

AbnormalState.propTypes = {
	className: PropTypes.string,
	resultNumbers: PropTypes.arrayOf(
		PropTypes.shape({
			normalNodeCount: PropTypes.number,
			abnorNodeCount: PropTypes.number,
		})
	),
	dateStr: PropTypes.string,
};

AbnormalState.defaultProps = {
	className: '',
};

export default AbnormalState;
